<template>
	<view>
		<!-- 购物车 -->
		<view class="list-class">
			<view class="item-div">
				<view class="list-item" v-for="(item,index) in gwcs">
					<!-- 复选框 -->
					<view @click="shopcheak(index)" :class="`${item.checkeds?'fxk-class fxk-xz-class':'fxk-class '}`">
						<view :class="`${item.checkeds?'gougou-class':''}`"></view>
					</view>
					<view class="left-right">
						<img class="list-item-img" :src="item.shop.spImg">
						<text
							class="nc-class">{{item.shop.spName.length>13?item.shop.spName.substring(0,13):item.shop.spName}}</text>
						<text class="price-count">￥{{item.scPriceCount}}</text>
						<text class="count-s">x{{item.scCount}}</text>
					</view>
					<view class="button-zhuihun-class" v-if="index==gwcs.length-1">
					</view>
				</view>
			</view>


		</view>

		<ssPaymentPassword ref="paymentPassword" :mode="mode" @submit="submitHandle" />
		<!-- 底部  -->
		<view class="dbu-daohan">
			<view class="left-dbu">
				<checkbox-group class="block" @change="CheckboxChange">
					<text class="left-dbu-qx-wz">全选</text>
					<text class="findex-rido-left">
						<checkbox class='round blue' :class="checkbox[0].checked?'checked':''"
							:checked="checkbox[0].checked?true:false" value="C"></checkbox>
					</text>
				</checkbox-group>

				<!--  右边的结算 -->
				<view class="right-dbu">
					<view class="prices">￥{{parseFloat(priceCount).toFixed(2)}}</view>
					<button   class="fk-button" @click="paySumit">付款</button>
				</view>
				<view class="delete-button" v-show="priceCount>0" @click="deleteGwc">
					<img class="delete-ioc" src="../../static/ioc/delete.png">
				</view>

			</view>
		</view>

	</view>
	</view>
</template>

<script>
	//引入组件文件
	import ssPaymentPassword from '../../components/sanshui-payment-password/index.vue'
	export default {
		components: {
			ssPaymentPassword
		},
		data() {
			return {
				payFlag: true,
				mode: 1,
				gwcs: [{
					texts: "4抖音币抖音币抖音币抖音币抖音币抖音币",
					price: 98.20,
					checkeds: false,
					img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.beneficiation-machine.com%2Fwp-content%2Fuploads%2F2021%2F09%2F1631599744-921fac917bb5e86.jpg&refer=http%3A%2F%2Fwww.beneficiation-machine.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643641213&t=6f32e658ada2bb7f10f64153c179ed3a",
					count: 1
				}],
				shops: [],
				priceCount: 0,
				checkbox: [{
					value: 'C',
					checked: false
				}],
				url: this.$url + "/frontend",
				urId: sessionStorage.getItem("urId"),
			}
		},
		onShow() {
			this.priceCount = 0
			this.checkbox = [{
				value: 'C',
				checked: false
			}]
			this.list()
		},
		methods: {
			paySumit() {
				this.showModal()
			},
			showModal() {
				this.$refs.paymentPassword.modalFun('show');
			},
			submitHandle(e) {
				var payPassword = e.value
				//获取到我们的支付密码去后端提交支付订单进行出来订单
				//获取我们选中的购物的商品
				//    private Integer urId;
				// private String PaymentPassword;
				//private Integer ctId;
				var gwc = this.gwcs
				var data = []
				for (var i = 0; i < gwc.length; i++) {
					if (gwc[i].checkeds == true) {
						//我们选中的商品获取当前的商品id	
						data[data.length] = {
							urId: this.urId,
							payPassword: payPassword,
							ctId: gwc[i].scId
						}
					}
				}
				//发送我们的请求给我们的后端
				uni.request({
					url: `${this.url}/pay/PaymentPassword`,
					method: 'POST',
					data: data,
					success: ({
						data
					}) => {
						clearTimeout(function(){
							this.priceCount = 0
							this.checkbox = [{
								value: 'C',
								checked: false
							}]
							this.list()
						},5000)
						uni.showToast({
							title: data.message
						})

					}
				})
			},
			list() {
				uni.request({
					url: `${this.url}/shoppingcart/all/${this.urId}`,
					method: "GET",
					success: ({
						data
					}) => {
						this.gwcs = []
						this.gwcs = data.data.data
						//console.log(this.gwcs)
					}
				})

			},
			CheckboxChange(e) {
				//console.log(e.detail.value)
				var items = this.checkbox,
					values = e.detail.value;
				var lenI = 0
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].value == values[j]) {
							items[i].checked = true;
							break
						}
					}
				}
				if (this.checkbox[0].checked) {
					var prices = 0
					for (var i = 0; i < this.gwcs.length; i++) {
						this.gwcs[i].checkeds = true
						prices = prices + this.gwcs[i].scPriceCount
					}
					this.priceCount = prices
				} else {
					for (var i = 0; i < this.gwcs.length; i++) {
						this.gwcs[i].checkeds = false
					}
					this.priceCount = 0
				}
			},
			shopcheak(index) {
				if (this.gwcs[index].checkeds) {
					this.priceCount = this.priceCount - this.gwcs[index].scPriceCount
					this.gwcs[index].checkeds = false
				} else {
					this.priceCount = this.priceCount + this.gwcs[index].scPriceCount
					this.gwcs[index].checkeds = true
				}
				var length = 0;
				for (var i = 0; i < this.gwcs.length; i++) {
					if (this.gwcs[i].checkeds) {
						length++;
					}
				}
				if (length == this.gwcs.length) {
					//全部选中
					this.checkbox[0].checked = true
				}

			},
			deleteGwc() {
				var indexs = []
				for (var i = 0; i < this.gwcs.length; i++) {
					if (this.gwcs[i].checkeds) {
						indexs.push(this.gwcs[i].scId)
					}
				}
				uni.request({
					url: `${this.url}/shoppingcart/delete`,
					method: "post",
					data: indexs,
					success: ({
						data
					}) => {
						this.list()
					}
				})
				this.checkbox[0].checked = false
				this.priceCount = 0
			}

		}
	}
</script>

<style scoped>
	.delete-ioc {
		position: relative;
		width: 50%;
		height: 50%;
	}

	.delete-button {
		position: absolute;
		top: 20%;
		width: 100rpx;
		height: 100rpx;
		color: #FFFFFF;
		border-radius: 50%;
		right: 400rpx;
	}

	.count-s {
		width: 60rpx;
		line-height: 60rpx;
		text-align: center;
		height: 60rpx;
		border-radius: 10px;
		border: 2px solid #eff0f0;
		position: absolute;
		right: 10%;
		top: 200rpx;
		font-size: 12px;
	}

	.price-count {
		position: relative;
		left: 5%;
		font-size: 17px;
		color: #ff1524;
	}

	.left-right {
		position: relative;
		left: 13%;
		bottom: 10%;
		height: 300rpx;
		width: 88%;
	}

	.nc-class {
		position: absolute;
		width: 60%;
		font-size: 15 px;
		margin-left: 5%;
		line-height: 200rpx;
		font-weight: 600;
	}

	.gougou-class {
		position: relative;
		margin: 20% auto;
		content: " ";
		height: 16rpx;
		width: 24rpx;
		border-width: 0px 2px 2px 0px;
		border-color: #ffffff;
		border-style: solid;
		-webkit-transform: matrix(0, 0, 0.81, 0.71, 0.71, -0.71);
		transform: matrix(-0.71, 0.71, 0.71, 0.71, 0, 0);

	}

	.fxk-xz-class {
		background-color: #0081ff;
		border: 1px solid #ffffff;
	}

	.fxk-class {
		position: relative;
		width: 40rpx;
		height: 40rpx;
		transition: all 0.5s ease;
		left: 20rpx;
		border-radius: 50%;
		border: 1px solid #d2d3d5;
		top: 130rpx;
	}

	.list-item-img {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		top: 50rpx;
		border-radius: 10px;
	}

	.list-item {
		position: relative;
		float: left;
		width: 96%;
		left: 2%;
		height: 300rpx;
		border-radius: 10px;
		margin-top: 3%;
		background-color: #FFFFFF;
	}

	.item-div {
		position: relative;
		width: 100%;
	}

	.fk-button {
		font-size: 15px;
		float: left;
		position: absolute;
		width: 40%;
		bottom: 50%;
		right: 10rpx;
		border-radius: 20px;
		color: #FFFFFF;
		background: linear-gradient(#5555ff, #55aaff);
	}

	.prices {
		color: #FF5077;
		font-size: 16px;
		bottom: 30rpx;
		left: 50rpx;
		float: left;
		position: relative;
	}

	.right-dbu {
		position: absolute;
		float: left;
		right: 0;
		width: 200px;
		bottom: 20rpx;

	}

	* /deep/ .uni-checkbox-input {
		width: 30rpx;
		height: 30rpx;
		right: 22%;
	}

	.findex-rido-left {
		position: relative;
		left: 5%;
		top: 30rpx;
		bottom: 5rpx;
	}

	.left-dbu-qx-wz {
		position: relative;
		font-size: 13px;
		left: 5rpx;
		top: 30rpx;
		font-weight: 500;
	}

	.button-zhuihun-class {
		position: relative;
		width: 100px;
		height: 120px;
	}

	.list-class {
		position: relative;
		width: 100%;
		;
	}

	.left-dbu {
		bottom: 4, 0%;
		width: 100%;
		background-color: #f0f0f0;
	}

	.dbu-daohan {
		position: fixed;
		left: 0px;
		bottom: 5%;
		width: 100%;
		height: 62px;
		background-color: #f1f1f1;

	}
</style>
